import { View, Text, TouchableOpacity } from 'react-native';
import React from 'react';
import { useRouter } from 'expo-router';
import { Feather } from '@expo/vector-icons';

/**
 * 404页面 - 处理未找到的路由
 * 当用户访问不存在的路由时显示
 */
export default function NotFoundScreen() {
  const router = useRouter();

  return (
    <View className="flex-1 items-center justify-center bg-white dark:bg-gray-900 px-6">
      <Feather name="alert-circle" size={80} color="#f87171" />
      
      <Text className="text-3xl font-bold mt-6 text-gray-800 dark:text-gray-100">
        页面未找到
      </Text>
      
      <Text className="text-base text-gray-600 dark:text-gray-300 text-center mt-3 mb-8">
        抱歉，您访问的页面不存在或已被移除。
      </Text>
      
      <TouchableOpacity
        className="bg-blue-500 py-3 px-6 rounded-full flex-row items-center"
        onPress={() => router.replace('/')}
      >
        <Feather name="home" size={20} color="#ffffff" />
        <Text className="text-white font-medium ml-2">
          返回首页
        </Text>
      </TouchableOpacity>
      
      <TouchableOpacity
        className="mt-4 py-3 px-6 rounded-full flex-row items-center"
        onPress={() => router.back()}
      >
        <Feather name="arrow-left" size={20} color="#3b82f6" />
        <Text className="text-blue-500 font-medium ml-2">
          返回上一页
        </Text>
      </TouchableOpacity>
    </View>
  );
} 